<template>
	<div class="count-down">
		<div class="residual-time">
			<span>{{ msgTime }}</span>
			<em>{{ hours }}</em>
			<span>时</span>
			<em>{{ minute }}</em>
			<span>分</span>
			<em>{{ second }}</em>
			<span>秒</span>
		</div>
		<div class="buy-btn" v-bind:class="{'fail': fail}"> <!-- fail -->
			{{ msg }}
		</div>
	</div>
</template>

<!-- 
	是否重复下单
	限购数量
	秒杀开始时间
	结束时间
	库存

 -->

<script type="text/javascript">
import Vue from 'vue';
export default{
	data:function(){
		return{
			hours:'00',
			minute:'00',
			second:'00',
			isBuy:true, //是否购买过
			limitNum:100, // 限购数
			buied:10, // 已买数
			selled:50, //已售
			stock:20, //库存
			msg:'立即购买',
			fail:false, // class 
			activeEnd:false, //活动是否结束
			activeStart:false, // 活动是否开始
			msgTime:'剩余时间'

		}
	},
	methods:{
		dataNumber:function(time){
			var time = time.substring(0,19);    
			time = time.replace(/-/g,'/'); 
			var timestamp = new Date(time).getTime();
			return timestamp;
		},
		toData:function(startData,endData){
			var startData=this.dataNumber(startData);
			var endData=this.dataNumber(endData);
			var seconds=(endData-startData)/1000;
			return {
				seconds
			}
		},
		toNum:function(num){
			return num<10?'0'+num:num;
		}
	},
	events:{
		sendTime:function(d){
			var that=this;
			// 开始 当前 结束
			var s=that.toData(d[0],d[1]).seconds;

			//如果活动还没开始
			if(s<0){
				this.activeStart=false;
			 	s=that.toData(d[1],d[0]).seconds;
			}else{ //如果活动开始了
				this.activeStart=true;
				s=that.toData(d[1],d[2]).seconds;
			}

			setInterval(function(){
				s--;
				if(s<=0){
					//如果活动还没开始
					if(!that.activeStart){
						that.activeStart=true; // 那就开始活动
						console.log(that.activeStart);
						console.log("开始活动");
						s=that.toData(d[1],d[2]).seconds;
					}else{
						//如果活动开始了 那就结束活动
						that.activeEnd=true;
					}
				}

				var day=Math.floor(s/(60*60*24)); 
				var hour=Math.floor((s-day*24*60*60)/3600);
				var hours=hour+day*24;
				var minute=Math.floor((s-day*24*60*60-hour*3600)/60); 
				var second=Math.floor(s-day*24*60*60-hour*3600-minute*60); 

				that.hours=that.toNum(hours);
				that.minute=that.toNum(minute);
				that.second=that.toNum(second);
			},1000);

			// 如果活动还没开始
			if(!this.activeStart){
				this.msg="即将开始";
				this.fail=true;
				this.msgTime='距开始时间';
			}else{ //活动开始了
				this.fail=false;
				this.msgTime='剩余时间';
				// 如果活动结束了
				if(this.activeEnd){
					this.msg="活动结束";
					this.fail=true;
				}else{ //活动没有结束
					//如果库存大于0
					if(this.stock>0){
						if(this.buied<this.limitNum){ // 并且购买数未达到购买限制
							//如果用户未购买
							if(!this.isBuy){
								this.msg="立即购买";
								this.fail=false;
							}else{ //如果用户购买过
								this.msg="再次购买";
								this.fail=false;
							}
						}else{ // 已购数达到购买限制
							this.msg="不能再买咯";
							this.fail=true;
						}
					}else{ // 没有库存了
						this.msg="秒光了";
						this.fail=true;
					}
				}
			}
			

			
			
		}
	}, 
	watch: {
	    'activeStart': function () {
	      // 如果活动还没开始
			if(!this.activeStart){
				this.msg="即将开始";
				this.fail=true;
				this.msgTime='距开始时间';
			}else{ //活动开始了
				this.fail=false;
				this.msgTime='剩余时间';

				// 如果活动结束了
				if(this.activeEnd){
					this.msg="活动结束";
					this.fail=true;
				}else{ //活动没有结束

					//如果库存大于0
					if(this.stock>0){

						if(this.buied<this.limitNum){ // 并且购买数未达到购买限制
							//如果用户未购买
							if(!this.isBuy){
								this.msg="立即购买";
								this.fail=false;
							}else{ //如果用户购买过
								this.msg="再次购买";
								this.fail=false;
							}
						}else{ // 已购数达到购买限制
							this.msg="不能再买咯";
							this.fail=true;
						}


					}else{ // 没有库存了
						this.msg="秒光了";
						this.fail=true;
					}
				}
			}
	    }
	},    
	ready:function(){
		console.log(this.hours);
	}
}

</script>

<style lang="scss">
	@import '../../assets/css/_functions.scss';
	@import '../../assets/css/_variables.scss';

	.count-down {
		font-size: rem(14);
		width: rem(375);
		height: rem(48);
		background:#fff;
		border-top:rem(1) solid #c8c7cc;
		display: flex;
		justify-content: space-between; 
		position: fixed;
		bottom: 0;
		.residual-time{
			width: rem(255);
			height: rem(48);
			font-size: rem(14);
			color: $_333;
			line-height: rem(48);
			text-align: center;
			display:inline-block;
			em {
				width: rem(21);
				height: rem(21);
				background:#333;
				color:#fff;
				font-size: rem(14);
				text-align: center;
				line-height: rem(21);
				border-radius: rem(5);
				display:inline-block;

			}
		}
		.buy-btn{
			width: rem(120);
			height: rem(48);
			line-height: rem(48);
			text-align: center;
			background:#ff6600;
			color:#fff;
			font-size: rem(18);
			&.fail{
				background:#ccc;
			}
		}
	}

</style>




















